<template>
  <el-card class="user-list-card">
    <template #header>
      <div class="card-header">
        <span>用户列表</span>
      </div>
    </template>
    
    <el-table :data="userData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" sortable />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
            {{ row.status === 'active' ? '活跃' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default>
          <el-button size="small">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="50"
        :page-size="10"
      />
    </div>
  </el-card>
</template>

<script setup>
const userData = [
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    status: 'active'
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    status: 'inactive'
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com',
    status: 'active'
  },
  {
    id: 4,
    name: '赵六',
    email: 'zhaoliu@example.com',
    status: 'active'
  },
  {
    id: 5,
    name: '钱七',
    email: 'qianqi@example.com',
    status: 'inactive'
  }
]
</script>

<style scoped>
.user-list-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>